<script setup>
defineProps({
  title: {
    required: true,
    type: String
  }
})
</script>

<template>
  <!--      页面的内容-->
  <div class="header">
    <div class="header-icon">
      <img class="icon" src="../assets/Logo.png" alt="">
      <div class="text">铺铺转</div>
      <div class="adress">
        <img class="icon1" src="../assets/weizhi.png">
        <div class="adrtxt">江苏省.苏州市</div>
      </div>
    </div>
    <div class="header-option">
      <div class="opnionitem">我的店铺</div>
      <div class="opnionitem">关注店铺</div>
      <div class="opnionitem">精选匹配推荐</div>
    </div>
    <div class="header-login">登录/注册</div>
  </div>
</template>

<style lang="scss" scoped>
.header{
  width: 100%;
  height: 55px;
  background-color: rgba(56, 56, 56, 1);
  display: flex;
  .header-icon{
    width: 400px;
    height: 40px;
    margin: 7.5px 200px 0 160px;
    font-family: '优设好字体';
    //background-color: pink;
    font-size: 18px;
    line-height: 40px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    .icon{
      width: 24px;
      height: 24px;
      margin: 8px;
    }
    .adress{
      width: 120px;
      height: 22px;
      padding: 0 5px;
      margin: 9px 10px;
      border: 1px solid #fff;
      border-radius: 4px;
      display: flex;
      .icon1{
        width: 18px;
        height: 18px;
        margin: 2px 0;
      }
      .adrtxt{
        width: 104px;
        height: 22px;
        font-size: 14px;
        line-height: 22px;
        color: rgba(229, 229, 229, 1);

      }
    }
  }
  .header-option{
    width: 320px;
    height: 55px;
    //background-color: pink;
    display: flex;
    .opnionitem{
      width: 100px;
      height: 55px;
      line-height: 55px;
      font-size: 14px;
      color: rgba(196, 196, 196, 1);
      text-align: center;
    }
  }
  .header-login{
    width: 100px;
    height: 55px;
    margin-left: 400px;
    //background-color: #fff;
    line-height: 55px;
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
  }
}
</style>
